<template>
	<uni-popup ref="popup" type="bottom" background-color="#fff" borderRadius="10px 10px 0 0"
		mask-background-color="rgba(0,0,0,0.6)">
		<view class="popup">
			<view class="close-popup">
				<text>选择付款方式</text>
				<u-icon @click="close" size="14" bold name="close" style="position: absolute; right: 0; padding: 5px;"></u-icon>
			</view>
			<view class="pay-type">
				<view v-for="(item,index) in isPayList" :key="index" @click="getSelectPay(item.type)">
					<image style="width: 26px;height: 26px;" :src="item.icon" mode=""></image>
					<view style="flex: 1; margin-left: 10px;">
						<view class="Grid Grid--bottom">
							<view>{{item.name}}</view>
							<view v-if="item.type == 3"><u--text size="12" mode="price" :text="userInfo.balance"></u--text></view>
						</view>
					</view>
					<template v-if="item.type == 1 || item.type == 2">
						<image v-if="selectPay == item.type" style="width: 20px;height: 20px;"
							src="https://code-app.oss-cn-beijing.aliyuncs.com/jyl/other/select.png" mode=""></image>
						<image v-else style="width: 20px;height: 20px;" src="https://code-app.oss-cn-beijing.aliyuncs.com/jyl/other/no-select.png" mode="">
						</image>
					</template>
					<template v-if="item.type == 3">
						<template v-if="isBalance">
							<image v-if="selectPay == item.type" style="width: 20px;height: 20px;"
								src="https://code-app.oss-cn-beijing.aliyuncs.com/jyl/other/select.png" mode=""></image>
							<image v-else style="width: 20px;height: 20px;" src="https://code-app.oss-cn-beijing.aliyuncs.com/jyl/other/no-select.png" mode="">
							</image>
						</template>
						<template v-else>
							<u-button type="warning" text="去充值" style="width: 60px; height: 28px;background: #8E512F;border: none;" @click="handleRecharge"></u-button>
						</template>
					</template>
				</view>
			</view>
			<view class="checkboxStyle">
				<u-checkbox-group v-model="checkboxValue" placement="column">
					<u-checkbox :customStyle="{marginBottom: '8px',marginTop: '16px'}" labelColor="#8E512F" activeColor="#8E512F"
						v-for="(item, index) in checkboxList" :key="index" :name="item.name" size="14" labelSize="14">
					</u-checkbox>
				</u-checkbox-group>
				<text @click="buyHint">购买须知</text>
			</view>
			<!-- 非新人首免 -->
			<view
				v-if="!userInfo.phone_discount && data.market_ids && data.market_ids.includes(1) && !(data.market_ids && data.market_ids.includes(4) && !userInfo.orders)"
				class="checkboxStyle">
				<u-checkbox-group v-model="bindingCheckboxValue" placement="column">
					<u-checkbox :customStyle="{marginBottom: '8px',marginTop: '16px'}" labelColor="#8E512F" :name="true" activeColor="#8E512F"
						:label="data.discount_fee * 1 ? `绑定手机立减${data.discount_fee}元` : `绑定手机号码`" size="14"
						labelSize="14">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view
				v-if="userInfo.phone_discount === 1 && data.market_ids && data.market_ids.includes(1) && !(data.market_ids && data.market_ids.includes(4) && !userInfo.orders)"
				class="checkboxStyle" style="color: #8E512F;">
				{{data.discount_fee * 1 ? `享首绑优惠,本单立减${data.discount_fee}元` : `绑定手机号码`}}
			</view>
			<!-- 新人首免 -->
			<view
				v-if="!userInfo.phone_discount && data.market_ids && data.market_ids.includes(1) && (data.market_ids && data.market_ids.includes(4) && !userInfo.orders)"
				class="checkboxStyle">
				<u-checkbox-group v-model="bindingCheckboxValue" placement="column">
					<u-checkbox :customStyle="{marginBottom: '8px',marginTop: '16px'}" labelColor="#8E512F" :name="true"
						:label="`绑定手机号码`" size="14" labelSize="14">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- <view v-if="userInfo.phone_discount === 1 && data.market_ids && data.market_ids.includes(1) && (data.market_ids && data.market_ids.includes(4) && !userInfo.orders)" class="checkboxStyle" style="color: #8E512F;">
				绑定手机号码
			</view> -->

			<!-- 满足新人首免时不展示其他可用营销方案 -->
			<view v-if="!(data.market_ids && data.market_ids.includes(4) && !userInfo.orders)" class="checkboxStyle"
				style="color: #8E512F;">
				<u-checkbox-group v-if="data.coupon_list && data.coupon_list.length" v-model="couponCheckboxValue"
					placement="column" @change="couponCheckboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px',marginTop: '16px'}" labelColor="#8E512F" :name="true"
						size="14" labelDisabled labelSize="14">
					</u-checkbox>
				</u-checkbox-group>
				<view v-if="data.coupon_list && data.coupon_list.length" class="Grid Grid--center">
					<view class="Grid Grid--center Grid--justifyCenter text-sm"
						style="background-color: #fef0f0; padding: 2px 5px;">
						<u-icon name="coupon" color="#f56c6c" size="18"></u-icon>
						<view>券后可减{{radioCell.coupon_amount}}元</view>
					</view>
					<view v-if="couponCheckboxValue[0]" style="padding: 2px;">
						<u-icon :name="isArrow ? 'arrow-up' : 'arrow-down'" color="rgb(153, 153, 153)" size="14"
							@click="isArrow = !isArrow"></u-icon>
					</view>
				</view>
			</view>
			<view v-if="couponCheckboxValue[0] && data.coupon_list && data.coupon_list.length && isArrow"
				style="background-color: #F3F3F3; padding: 0 10px; border-radius: 4px; margin-top: 10px;">
				<scroll-view scroll-y="true" style="max-height: 100px;">
					<u-radio-group v-model="radiovalue" placement="column" @change="groupChange" activeColor="#8E512F"
						iconPlacement="right" size="16">
						<u-radio v-for="(item, index) in data.coupon_list" :key="index"
							:customStyle="{padding: '8px 0'}" labelSize="12"
							:label="`券后可减¥${item.coupon_amount}(有效期:${item.expire_time})`"
							:name="item.coupon_id"></u-radio>
					</u-radio-group>
				</scroll-view>
			</view>
			<u-button class="bj-color" type="warning" @click="confirmPay" throttleTime="3000">确认支付 <view>
					&yen;{{isPrice}}</view></u-button>
		</view>
	</uni-popup>
</template>
<script>
	import {
		mapState,
	} from "vuex";
	import {
		sub
	} from "@/utils/bc/bc.js";

	export default {
		props: {
			price: {
				type: Number,
				default: 0
			},
			data: {
				type: Object,
				default: {}
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
			isPayList() {
				if (Object.keys(this.data).length) {
					return this.payList
				} else {
					return this.payList.slice(0, -1)
				}
			},
			isPrice() {
				let v = this.price * 1
				if (this.userInfo.phone_discount != 2 && this.data.market_ids && this.data.market_ids.includes(1) && this
					.bindingCheckboxValue[0]) {
					v = sub(v, this.data.discount_fee * 1)
				}
				if (!(this.data.market_ids && this.data.market_ids.includes(4) && !this.userInfo.orders) && this
					.couponCheckboxValue[0] && Object.keys(this.radioCell).length) {
					v = sub(v, this.radioCell.coupon_amount * 1)
				}
				return (v * 1) > 0 ? (v * 1) : 0
			},
			isBalance() {
				if ((this.isPrice * 1) > (this.userInfo.balance * 1)) {
					return false
				} else {
					return true
				}
			}
		},
		data() {
			return {
				isArrow: false,
				checkboxValue: ['购买悉知'],
				bindingCheckboxValue: [true],
				couponCheckboxValue: [true],
				// 基本案列数据
				checkboxList: [{
					name: '购买悉知',
					disabled: false
				}, ],
				payList: [{
						name: '微信支付',
						type: 1,
						icon: 'https://code-app.oss-cn-beijing.aliyuncs.com/jyl/other/wx-pay.png',
						show: true
					},
					{
						name: '支付宝支付',
						type: 2,
						icon: 'https://code-app.oss-cn-beijing.aliyuncs.com/jyl/other/zfb-pay.png',
						show: true
					},
					{
						name: '余额支付',
						type: 3,
						icon: 'https://code-app.oss-cn-beijing.aliyuncs.com/jyl/other/zhye-pay.png',
						show: true
					}
				],
				selectPay: 1,
				radiovalue: 0,
				radioCell: {}
			}
		},
		methods: {
			// 点击购买悉知
			buyHint() {
				this.$emit('buyNote')
			},
			// 开启弹窗
			open() {
				this.$refs.popup.open('bottom')
				// 初始化
				this.initData()
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			// 选择付款方式
			getSelectPay(type) {
				if (Object.keys(this.data).length && !this.isBalance && type == 3) return
				this.selectPay = type
			},
			// 确认支付
			confirmPay() {
				console.log(this.checked, this.cb, 'checked')
				if (this.checkboxValue.length == 0) {
					uni.showToast({
						title: '请勾选购买须知',
						icon: 'none'
					})
					return
				}
				this.$emit('confirmPay', {
					payType: this.selectPay,
					binding: this.bindingCheckboxValue[0],
					couponBinding: this.couponCheckboxValue[0] ? this.radioCell : {}
				})
			},
			groupChange(e) {
				// console.log(e)
				// console.log(this.radiovalue)
				let obj = this.data.coupon_list.filter(item => item.coupon_id == e)
				this.radioCell = obj[0]
			},
			couponCheckboxChange(e) {
				// this.isArrow = e[0] ? false : true
			},
			initData() {
				console.log("打开弹窗初始化")
				// 非新人首免需结合是否用券情况
				if (!(this.data.market_ids && this.data.market_ids.includes(4) && !this.userInfo.orders) && this.data
					.coupon_list && this.data.coupon_list.length) {
					let obj = this.data.coupon_list[0]
					this.radiovalue = obj.coupon_id
					this.radioCell = obj
				}
			},
			handleRecharge() {
				uni.navigateTo({
					url: `/pages/user/payBalance/payBalance?appid=${this.userInfo.appid}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.popup {
		padding: 0 16px;

		.close-popup {
			height: 56px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			font-size: 14px;
			color: #000000;
			line-height: 24px;

			&>image {
				position: absolute;
				left: 0;
			}
		}

		.bj-color {
			width: 100%;
			height: 48px;
			background: linear-gradient(270deg, #8E512F 0%, #8E512F 100%);
			font-size: 14px;
			color: #FFF0ED;
			line-height: 48px;
			text-align: center;
			border-radius: 800px;
			margin: 10px 0 6px;
		}

		.pay-type {
			&>view {
				height: 58px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F3F3F3;
			}
		}

		.checkboxStyle {
			padding: 0 5px;
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #8E512F;
			margin-top: 10px;

			.u-checkbox-group {
				.u-checkbox {
					margin-bottom: 0 !important;
					margin-top: 0 !important;
				}
			}
		}
	}
</style>